<template>
  <div id="vip-center">
    <header>
      <section class="pt20 pl15">
        <i-button open-type="getUserInfo" i-class="getuser-button" shape="circle" size="small" @getuserinfo="getUserInfo" v-if="!userInfo.nickName">获取头像</i-button>
        <i-avatar v-else :src="userInfo.avatarUrl" size="large"></i-avatar>
        <aside class="pl15" @click="storeManager('./store-manager/main')">
          <p class="f16 addr">花果园M区小龙虾店</p>
          <p class="flex align-center pt10"><span class="f12">切换店铺</span><i class="iconfont" style="color: #fff;">&#xe616;</i></p>
        </aside>
        <div class="vip-center" @click="storeManager('./vip-cost/main')">
          <img src="./img/vip.png" class="ml10"/>
          <span class="pl5 f12">高级VIP</span>
          <i class="iconfont" style="color: #fff">&#xe616;</i>
        </div>
      </section>
    </header>
    <!--优惠卷部分-->
    <div class="integral pl15 pr15">
      <section>
        <aside>
          <article>
            <p class="f18"><span class="f12">￥</span>3200.05</p>
            <p class="f13">余额</p>
          </article>
          <article @click="storeManager('./coupon/main')">
            <p class="f18">5</p>
            <p class="f13">优惠券</p>
          </article>
          <article class="jifen" @click="storeManager('./credits-exchange/main')">
            <p class="f18">120</p>
            <p class="f13">积分</p>
          </article>
        </aside>
        <aside class="Lucky-draw" style="border-bottom: 1px dotted #f2f2f2">
          <article>
            <img src="./img/ico_01.png" class="ml10">
            <section class="pl10 tl">
              <p class="f16">抽奖</p>
              <p class="f12 mt5" style="color: #A5A5A5">抽奖有惊喜</p>
            </section>
          </article>
          <article>
            <img src="./img/ico_02.png" class="ml10">
            <section class="pl10 tl">
              <p class="f16">签到</p>
              <p class="f12 mt5" style="color: #A5A5A5">签到送积分</p>
            </section>
          </article>
        </aside>
        <i-notice-bar color="#F54727" i-class="notice-style" @click="storeManager('./notice/main')">
          <span style="color: #525252">公告：</span>2018年世界杯,将于6月14日至7月15日举行2018年世界杯,将于6月14日至7月15日举行
        </i-notice-bar>
      </section>
    </div>
    <!--我的订单-->
    <div class="my-order pl15 pr15 mt5">
      <i-cell-group>
        <i-cell title="我的订单" value="全部订单" @click="storeManager('./mine-order/main')" link-type="navigateTo"></i-cell>
      </i-cell-group>
      <section style="border-top: 1px solid #f2f2f2;">
        <aside @click="storeManager('./mine-order/main?id=2')">
          <i class="iconfont">&#xe64f;</i>
          <p>待付款</p>
        </aside>
        <aside>
          <i class="iconfont" @click="storeManager('./mine-order/main?id=3')">&#xe650;</i>
          <p>待收货</p>
        </aside>
        <aside @click="storeManager('./mine-order/main?id=4')">
          <i class="iconfont">&#xe65a;</i>
          <p>已完成</p>
        </aside>
      </section>
    </div>
    <!-- 常用店铺管理-->
    <div class="my-order mt5 pl15 pr15">
      <section>
        <aside @click="storeManager('./store-manager/main')">
          <i class="iconfont" style="color: #FEAB2B">&#xe651;</i>
          <p>店铺管理 </p>
        </aside>
        <aside  @click="storeManager('./common-list/main')">
          <i class="iconfont" style="color: #F54727">&#xe65b;</i>
          <p>常用清单</p>
        </aside>
        <aside @click="storeManager('./balance-recharge/main')">
          <i class="iconfont" style="color: #FF6832">&#xe659;</i>
          <p>余额充值</p>
        </aside>
      </section>
      <section>
        <aside @click="storeManager('./user-pay-info/main')">
          <i class="iconfont" style="color:#5B91E8">&#xe657;</i>
          <p>账户明细</p>
        </aside>
        <aside @click="storeManager('./invite-recommond/main')">
          <i class="iconfont">&#xe63c;</i>
          <p>邀请推荐</p>
        </aside>
        <aside @click="storeManager('./invite-store/main')">
          <i class="iconfont" style="color:#256536">&#xe620;</i>
          <p>店铺采购码</p>
        </aside>
      </section>
      <section>
        <aside @click="storeManager('./staff-manger/main')">
          <i class="iconfont" style="color:#0070ff">&#xe60a;</i>
          <p>员工管理</p>
        </aside>
        <aside @click="storeManager('./purchase-request/main')">
          <i class="iconfont" style="color: #193825">&#xe667;</i>
          <p>采购申请</p>
        </aside>
        <aside @click="storeManager('./delivery-manager/main')">
          <i class="iconfont" style="color: #04a3e2">&#xe6eb;</i>
          <p>配送管理</p>
        </aside>
      </section>
    </div>
    <!--常用设置管理-->
    <div class="commont-setting mt5">
        <i-cell title="个人设置" is-link url="./user-system/main">
          <i-icon type="xitongshezhi" slot="iconfont" size="20" color="#567FF6" />
        </i-cell>
        <i-cell title="在线客服" is-link url="./online-services/main">
          <i-icon type="zaixiankefu" slot="iconfont" size="20" color="#82A541" />
        </i-cell>
        <i-cell  title="常见问题" is-link url="./common-problem/main">
          <i-icon type="changjianwenti" slot="iconfont" size="20" color="#F95318" />
        </i-cell>
        <i-cell  title="关于我们" is-link url="./about-us/main">
          <i-icon type="guanyuwomen" slot="iconfont" size="20" color="#22B14A" />
        </i-cell>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'mine',
    data () {
      return {
        userInfo: '',
        loginStatus: ''
      };
    },
    methods: {
      storeManager (url) {
        mpvue.navigateTo({ url });
      },
      getUserInfo (e) {
        this.userInfo = e.mp.detail.userInfo;
        if (this.loginStatus === '') {
          wx.showToast({
            title: '该用户未登录！',
            duration: 2000,
            icon: 'loading'
          });
          setTimeout(() => {
            let url = '../login-register/login/main';
            mpvue.navigateTo({ url });
          }, 5000);
        }
      }
    }
  };
</script>

<style lang='stylus' scope>
  #vip-center
    height 100%;padding-bottom 5px;
    header
      background url("") no-repeat center; background-size 100% 100%; height 167px;
      section
        display flex; align-items center; color #fff;
        img
          border-radius 50%; border 1px solid #fff; width 58px;height 58px;
        aside
          flex 1;
          p
            &>span
              vertical-align text-bottom;
          p.addr
            line-height 18px;
        .vip-center
          display flex;align-items center; border-top-left-radius 20px; border-bottom-left-radius 20px; height: 40px;  min-width 95px; background rgba(0,0,0,0.2);
          img
            width 25px; height 25px; border none;
    .integral
      margin-top -17%;
      section
        background #fff;border-radius 3px;
        aside
          height 65px; display flex; align-items center;
          article
            flex 1; text-align center; border-right 1px solid #EEEEEE; height 28px;
            .f18
              color #FF6832; margin-top -6%;
            .f13
              margin-top -1%;
          article.jifen
            border-color transparent;
        aside:first-of-type
          border-bottom: 1px solid #EEEEEE;
        .Lucky-draw
          &>article
            display flex;justify-content center; align-items center;
            img
              width 44px; height 44px;
    .my-order
      background #fff;
      section
        display flex; align-items center; height 70px;
        aside
          flex 1; text-align center;
          .iconfont
            font-size 25px; color #41B962;
          p
            font-size 13px;
  .notice-style
    background #fff!important; white-space nowrap;overflow hidden;text-overflow ellipsis;
</style>
<style lang="stylus">
  #vip-center
    .i-cell-ft
        font-size 12px;
  .getuser-button
    margin 0!important; border-radius 50%!important; padding 0!important; width 60px!important;height 60px!important; border none!important;color #ccc!important;background #f2f2f2!important; font-size 14px!important;line-height 60px!important; text-align center!important;
</style>
